import { View } from '@tarojs/components'
import React, { useEffect, useState } from 'react'
import {
  AtAvatar,
  AtButton,
  AtDivider,
  AtDrawer,
  AtIcon,
  AtInputNumber,
} from 'taro-ui'
import Taro from '@tarojs/taro'
import env from '../../../store/env.config'

interface ShoppingListProps {
  show: boolean
  userId: Number
  userInfo: any
  setShowShoppingList: React.Dispatch<any>
}

const ShoppingList: React.FC<ShoppingListProps> = ({
  show,
  userId,
  userInfo,
  setShowShoppingList,
}) => {
  const [userShoppingList, setShoppingList] = useState([] as any)

  const getShoppingData = () => {
    setShoppingList([])
    if (userId !== undefined && userId > 0) {
      Taro.request({
        url: `${env.domain}/shopping/list?userId=${userId}`,
        data: {
          token: userInfo['auth'],
        },
        success: (res) => {
          if (res.data['code'] === 200) {
            setShoppingList(res.data.data.recode)
          }
        },
      })
    }
  }

  useEffect(() => {
    getShoppingData()
  }, [userId, show])

  return (
    <AtDrawer
      show={show}
      mask
      width='320px'
      onClose={() => setShowShoppingList(false)}
    >
      {userShoppingList.map((item, index) => {
        return (
          <View key={index}>
            <View className='at-row'>
              <View className='at-col at-col-11'>
                <View>《{item.goods.name}》</View>
              </View>
              <View
                className='at-col at-col-1'
                onClick={() => {
                  Taro.request({
                    url: `${env.domain}/shopping/delete?token=${userInfo['auth']}`,
                    method: 'DELETE',
                    data: [item.id],
                    success: () => {
                      getShoppingData()
                    },
                  })
                }}
              >
                <AtIcon size='24' value='subtract-circle' color='red'></AtIcon>
              </View>
            </View>
            <View>
              <View className='at-row'>
                <View className='at-col at-col-4'>
                  <AtAvatar
                    className='goods-image'
                    image={item.goods.cover}
                  ></AtAvatar>
                </View>
                <View className='at-col at-col-8'>
                  <View className='text-p'>{item.goods.remark}</View>
                  <View style={{ color: 'red' }}>¥{item.goods.price}</View>
                  <View className='at-row'>
                    <View className='at-col at-col-6'>
                      <AtInputNumber
                        min={1}
                        max={10}
                        step={1}
                        value={item.num}
                        onChange={(val) => {
                          let tmp = userShoppingList
                          tmp[index].num = val
                          setShoppingList([...tmp])
                          Taro.request({
                            url: `${env.domain}/shopping/update?token=${userInfo['auth']}`,
                            method: 'PUT',
                            data: {
                              id: item.id,
                              num: val,
                            },
                          })
                        }}
                        type='number'
                      />
                    </View>
                    <View className='at-col at-col-6'>
                      <AtButton
                        type='primary'
                        size='small'
                        onClick={() => {
                          Taro.showModal({
                            title: '确认购买？',
                            content:
                              '确认购买点击确定按钮，取消购买点击取消按钮',
                            success: (res) => {
                              if (res.confirm) {
                                console.log({
                                  userId: userId,
                                  goodsId: item.goodsId,
                                  goodsNum: item.num,
                                  remark: '',
                                  addr: item.addr,
                                })

                                Taro.request({
                                  url: `${env.domain}/order/add?token=${userInfo['auth']}`,
                                  method: 'POST',
                                  data: {
                                    userId: userId,
                                    goodsId: item.goodsId,
                                    goodsNum: item.num,
                                    remark: '',
                                    addr: item.addr,
                                  },
                                  success: (res: any) => {
                                    if (res.data.code === 200) {
                                      Taro.showToast({
                                        title: '购买成功',
                                        icon: 'success',
                                        duration: 1000,
                                      })
                                      getShoppingData()
                                      return
                                    }
                                    Taro.showToast({
                                      title: res.data.message,
                                      icon: 'error',
                                      duration: 1000,
                                    })
                                  },
                                })
                              }
                            },
                          })
                        }}
                      >
                        购买
                      </AtButton>
                    </View>
                  </View>
                </View>
              </View>
              <AtDivider
                content={
                  index === userShoppingList.length - 1 ? '没有更多了' : ''
                }
                fontColor='#ed3f14'
                lineColor='#ed3f14'
              />
            </View>
          </View>
        )
      })}
    </AtDrawer>
  )
}

export default ShoppingList
